Crea un efecto coverflow con CSS
El efecto Coverflow es muy conocido y es usado en muchas situaciones, este efecto es normal verlo en la web usando jQuery, flash u otro lenguaje y en varias aplicaciones, en este tutorial vamos a hacer este ejercicio y crearemos este efecto coverflow, para esto utilzaremos una lista de html y usando las bondades de CSS lo conseguiremos facilmente, en este tutorial vamos a usar Transiciones, transformaciones y perspectivas de Css3.
Esto es lo que vamos a conseguir en este tutorial:
El html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<ul>
<li>
<img alt=»Joomla» src=»logo-joomla.jpg»>
<p>Joomla</p>
<a class=»boton» href=»http://www.joomla.org» target=»_blank»>Visitar</a>
</li>
<li>
<img alt=»Blogger» src=»logo-blogger.jpg»>
<p>Blogger</p>
<a class=»boton» href=»http://www.blogger.com» target=»_blank»>Visitar</a>
</li>
<li>
<img alt=»Wordpress» src=»logo-wordpress.jpg»>
<p>Wordpress</p>
<a class=»boton» href=»http://es.wordpress.org» target=»_blank»>Visitar</a>
</li>
<li>
<img alt=»Drupal» src=»logo-drupal.jpg»>
<p>Drupal</p>
<a class=»boton» href=»https://drupal.org/» target=»_blank»>Visitar</a>
</li>
<li>
<img width=»100″ height=»100″ alt=»Vbulletin» src=»logo-vbull.jpg»>
<p>Vbulletin</p>
<a class=»boton» href=»http://www.vbulletin.com» target=»_blank»>Visitar</a>
</li>
</ul>
|
Únicamente necesitaremos una lista desordenada <ul>, dentro de sus respectivos ítems <li> tenemos las imágenes, un párrafo <p> y el botón para visitar el vinculo deseado.
El css
Damos las dimensiones a la lista altura y anchura y aplicamos una perspectiva de 500px, y centramos la lista en el documento con el margin.
|
1
2
3
4
5
6
7
8
9
10
|
ul {
height: 160px;
margin: 60px auto;
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
-ms-perspective: 500px;
-o-perspective: 500px;
width: 525px;
}
|
Aplicamos color a los item de la lista que serán las cajas, los mostramos uno al lado del otro con inline-block, margin y box-sizing, aplicamos una transformación en el eje Y de 45º y una transición para dar la elegancia al evento cada propiedad con sus prefijos de autores, por si algo pasa e igual le damos un alto a las cajas y padding.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
ul li {
background-color: #222;
display: inline-block;
margin-right: -25px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
height: 165px;
list-style: none;
text-align: center;
transform: rotateY(45deg);
-webkit-transform: rotateY(45deg);
-moz-transform: rotateY(45deg);
-o-transform: rotateY(45deg);
transition: all ease .5s;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-o-transition: all ease .5s;
padding: 10px;
position: relative;
width: 112px;
z-index: 50;
}
|
Estilos para el párrafo que esta dentro de las cajas.
|
1
2
3
4
5
|
li p {
color:#ddd;
font-size: .9em;
margin: 4px 0 13px;
}
|
Estilos para el botón que lleva a los detalles del producto, aplicamos el fondo del botón en el estado inactivo y otras opciones para lograr la apariencia de botones en Css, por ultimo aplicamos una transición al color de fondo para cuando cambie de estado y aplicamos los estilos para el estado hover.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
ul li a.boton {
background-color: #222222;
border-radius: 2px 2px 2px 2px;
bottom: 5px;
color: #FFFFFF;
font-size: 1em;
padding: 0.5em;
right: 5px;
text-align: center;
text-decoration: none;
transition: background-color 1s ease 0s;
-webkit-transition: background-color 1s ease 0s;
-moz-transition: background-color 1s ease 0s;
-o-transition: background-color 1s ease 0s;
}
ul li a.boton:hover {
color: #222222;
}
|
Damos un ancho a la imagen que se encuentra dentro de la caja y la altura será relativa a su anchura.
|
1
2
3
4
|
ul li img {
height: auto !important;
width: 93px !important;
}
|
Ahora nos referimos a los ítems de la lista y su comportamiento tanto en el estado pasivo como en el hover, utilizamos la pseudo class nth-child, first-child, last-child para aplicar las rotaciones y posiciones adecuada, también aplicamos estilos al botón que tenemos como enlace.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
ul li:nth-child(3) {
background-color: #222222;
transform: rotateY(0deg) scale(1.22);
-webkit-transform: rotateY(0deg) scale(1.22);
-moz-transform: rotateY(0deg) scale(1.22);
-o-transform: rotateY(0deg) scale(1.22);
z-index: 55;
}
ul li:nth-child(3) a.boton {
background-color: #0099CC;
}
ul li:nth-child(3) ~ li {
transform: rotateY(-45deg);
-webkit-transform: rotateY(-45deg);
-ms-transform: rotateY(-45deg);
-o-transform: rotateY(-45deg);
-moz-transform: rotateY(-45deg);
}
ul li:last-child, ul li:first-child {
z-index: 45;
}
ul:hover li:not(:hover) {
background-color: #111111;
transform: rotateY(45deg);
-webkit-transform: rotateY(45deg);
-o-transform: rotateY(45deg);
-moz-transform: rotateY(45deg);
-ms-transform: rotateY(45deg);
}
ul:hover li a.boton {
background-color: #222222;
}
ul li:hover, ul li:first-child:hover, ul li:nth-child(3) ~ li:hover {
background-color: #222;
transform: rotateY(0) scale(1.22);
-webkit-transform: rotateY(0) scale(1.22);
-moz-transform: rotateY(0) scale(1.22);
-ms-transform: rotateY(0) scale(1.22);
-o-transform: rotateY(0) scale(1.22);
z-index: 60;
}
ul:hover li:hover a.boton {
background-color: #0099CC;
}
ul:hover li:hover ~ li {
transform: rotateY(-45deg);
-webkit-transform: rotateY(-45deg);
-ms-transform: rotateY(-45deg);
-o-transform: rotateY(-45deg);
-moz-transform: rotateY(-45deg);
}
|
– See more at: http://www.tutosytips.com/efecto-coverflow-con-css/#sthash.8CYFoOro.dpuf
Fuente:enlace